<template>
	<uni-popup ref="popup" :is-mask-click="false" type="center">
		<view class="fs-14 text-color-regular font-normal">
			<view class="flex justify-end mb-12">
				<image class="size-32" src="@/static/svg/icon-close.svg" @click.stop="onClose"></image>
			</view>
			<view class="uni-bg-white radius-12 p-20" style="width:80vw;">
				<view class="fs-16 font-medium text-center mb-12">经纪人权益</view>
				<block v-if="commissionAmt || commissionRate">
					<view class="font-semibold">权益一：</view>
					<view class="color-primary">
						佣金 {{ commissionAmt ? `¥${commissionAmt}` : `${commissionRate}%`}}
					</view>
					<view class="font-semibold mt-12" v-if="otherEquity">权益二：</view>
					<view>
						<text v-if="otherEquity">{{otherEquity.replace(/\\n/g, '\n')}}</text>
					</view>
				</block>
				<view v-else>
					<text v-if="otherEquity">{{otherEquity.replace(/\\n/g, '\n')}}</text>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup name="EquityDialog">
	import { ref } from 'vue'

	const props = defineProps({
		otherEquity: {
			type: String
		},
		commissionAmt: {
			type: [Number, String]
		},
		commissionRate: {
			type: [Number, String]
		},
		defaultCommissionType: {
			type: [Number, String]
		}
	})

	const popup = ref(null)

	const onClose = () => {
		popup.value && popup.value.close()
	}

	const showDialog = (value) => {
		if (value) {
			popup.value && popup.value.open()
		} else {
			popup.value && popup.value.close()
		}
	}

	defineExpose({
		showDialog
	})
</script>
